<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>意见反馈</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <style>
        header {
            margin-top: 0rem;
        }

        .aui-searchbar {
            background: transparent;
        }

        .aui-bar-nav .aui-searchbar-input {
            background-color: #ffffff;
        }

        .aui-bar-light .aui-searchbar-input {
            background-color: #f5f5f5;
        }

        .aui-bar-nav,
        .aui-btn {
            color: #FFFFFF;
            background: -webkit-linear-gradient(left top, #0F9BEB, #1569C8);
            /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(bottom right, #0F9BEB, #1569C8);
            /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(bottom right, #0F9BEB, #1569C8);
            /* Firefox 3.6 - 15 */
            background: linear-gradient(to bottom right, #0F9BEB, #1569C8);
            /* 标准的语法*/
        }

        .aui-bar-nav {
            /* 标准的语法*/
            top: 0;
            line-height: 2.2rem !important;
            background-color: #03a9f4;
            color: #ffffff;
            padding: 1rem 0 0 0 !important;
        }

        .submit_box {
            height: 10rem;
            margin: 0.8rem 0.75rem !important;
        }

        #textarea {
            padding: 0.35rem;
            font-size: 0.6rem;
            border: 1px solid #999999;
        }

        span#textnum {
            position: absolute;
            right: 0.25rem;
            bottom: 0;
            color: #999999;
        }
        a.aui-pull-left.aui-btn {
            height: 2.2rem !important;
            line-height: 2.2rem !important;
        }
        .aui-bar-nav .aui-title {
            min-height: 2.2rem !important;
            text-overflow: ellipsis;
            z-index: 2;
        }
        .aui-bar {
                       min-height: 3.2rem;
        }
        .aui-icon-left:before {
            content: none !important;
        }

        .aui-btn-block {
            font-size: 0.7rem !important;
            height: 2rem !important;
            line-height: 2rem !important;
        }
        .aui-bar-nav .aui-btn .aui-iconfont {
            width: 1.1rem !important;
            height: 1.1rem !important;
            font-size: 0.9rem;
            line-height: 1.1rem;
            padding: 0;
            margin: 0;
            /*color: #ffffff;*/
        }
        .aui-icon-left{
            background-image: url("../../image/nav_back@2x.png");
            background-repeat: no-repeat;
            background-size: 1.1rem;
        }
    </style>
</head>

<body>
<header class="aui-bar aui-bar-nav">
    <a href="set.html" class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">意见反馈</div>
</header>

<div class="aui-content-padded submit_box">
    <textarea id="textarea" placeholder="您的宝贵意见" style="resize: none; height:10rem; overflow-y: hidden;"></textarea>
    <span id="textnum">0/150</span>
</div>
<div class="aui-content-padded">
    <div class="aui-btn aui-btn-block" tapmode onclick="openDialog('callback')">提 &emsp;交</div>
</div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/aui-dialog.js"></script>
<script src="../../jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../script/tool.js"></script>
<script type="text/javascript">
  var headers = {}

  apiready = function () {
    api.parseTapmode();
    headers = {
      "appVersion": "1.0.0",
      "os": api.systemType,
      "osVersion": api.systemVersion
    }
  }

  var dialog = new auiDialog({})

  function openDialog(type) {
    switch (type) {
      case "callback":
        dialog.alert({
          title: "提示",
          msg: '确定提交？',
          buttons: ['取消', '确定']
        }, function (ret) {
          var message = $('#textarea').val();
          $('#textarea').val("").focus();
          console.log(message)
          if (ret) {
            $.ajax({
              url: orginlink+"/feedback/addFeedBack",
              type: 'POST',
              data:JSON.stringify({
                message: message
              }),
              headers: headers,
              contentType: "application/json",
              dataType: 'json',
              success: function (data) {
                dialog.alert({
                  title: "提示",
                  msg: data.msg,
                  buttons: ['确定'],

                });
              }
            });
          }
        })
        break;
    }
  }
</script>
<script>
  //	输入框溢出换行
  var autoTextarea = function (elem, extra, maxHeight) {
    extra = extra || 0;
    var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
      isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
      addEvent = function (type, callback) {
        elem.addEventListener ?
          elem.addEventListener(type, callback, false) :
          elem.attachEvent('on' + type, callback);
      },
      getStyle = elem.currentStyle ? function (name) {
        var val = elem.currentStyle[name];

        if (name === 'height' && val.search(/px/i) !== 1) {
          var rect = elem.getBoundingClientRect();
          return rect.bottom - rect.top -
            parseFloat(getStyle('paddingTop')) -
            parseFloat(getStyle('paddingBottom')) + 'px';
        }
        ;

        return val;
      } : function (name) {
        return getComputedStyle(elem, null)[name];
      },
      minHeight = parseFloat(getStyle('height'));

    elem.style.resize = 'none';

    var change = function () {
      var scrollTop, height,
        padding = 0,
        style = elem.style;

      if (elem._length === elem.value.length) return;
      elem._length = elem.value.length;

      if (!isFirefox && !isOpera) {
        padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
      }
      ;
      scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

      elem.style.height = minHeight + 'px';
      if (elem.scrollHeight > minHeight) {
        if (maxHeight && elem.scrollHeight > maxHeight) {
          height = maxHeight - padding;
          style.overflowY = 'auto';
        } else {
          height = elem.scrollHeight - padding;
          style.overflowY = 'hidden';
        }
        ;
        style.height = height + extra + 'px';
        scrollTop += parseInt(style.height) - elem.currHeight;
        document.body.scrollTop = scrollTop;
        document.documentElement.scrollTop = scrollTop;
        elem.currHeight = parseInt(style.height);
      }
      ;
    };

    addEvent('propertychange', change);
    addEvent('input', change);
    addEvent('focus', change);
    change();
  };

  //输入框字数限制
  $(function () {
    $('#textarea').on('keyup', function () {
      var txtval = $('#textarea').val().length;
      console.log(txtval);
      var str = parseInt(txtval);
      console.log(str);
      if (str < 150) {
        $('#textnum').html(str + '/150');
      } else {
        $('#textnum').html('150' + '/150');
        $('#textarea').val($('#textarea').val().substring(0, 150));
      }
      //console.log($('#num_txt').html(str));
    });
  })
</script>

</html>